<template>
  <section>
    <search-box>
      <div class="search-box">
          客户ID:
        <div class="search-input">
          <el-input v-model="search_list.customer_id.value" ></el-input>
        </div>
        <div class="search-input m-left20">
          <el-button type="primary" @click="FnGetList(1)">查询</el-button>
        </div>
      </div>
    </search-box>

    <el-table :data="list" border stripe>
      <el-table-column prop="id" label="镜像仓库id" min-width="130"></el-table-column>
      <el-table-column prop="name" label="镜像仓库名称" min-width="130"></el-table-column>
      <el-table-column prop="status" label="镜像仓库状态" min-width="130"></el-table-column>
      <el-table-column prop="app_id" label="vdc id" min-width="130"></el-table-column>
      <el-table-column prop="vm_id" label="真实云主机id" min-width="130"></el-table-column>
      <el-table-column prop="vm_name" label="真实云主机名称" min-width="130"></el-table-column>
      <el-table-column prop="site_id" label="可用区id" min-width="130"></el-table-column>
      <el-table-column prop="net_info" label="绑定网络信息" width="200">
        <template #default="scope">
          <copy :str="scope.row.net_info"></copy>
          <div class="pre-code-box"><pre>{{JSON.parse(scope.row.net_info)}}</pre></div>
        </template>
      </el-table-column>
      <el-table-column prop="customer_id" label="customerid" min-width="130"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" min-width="130"></el-table-column>
      <el-table-column prop="update_time" label="更新时间" min-width="130"></el-table-column>
      <el-table-column prop="spec_info" label="规格信息" min-width="130"></el-table-column>
      <el-table-column prop="disk_info" label="数据盘信息(G)" width="200">
        <template #default="scope">
          <copy :str="scope.row.disk_info"></copy>
          <div class="pre-code-box"><pre>{{JSON.parse(scope.row.disk_info)}}</pre></div>
        </template>
      </el-table-column>
      <el-table-column prop="sub_domains" label="子域名列表" min-width="130"></el-table-column>
      <el-table-column prop="domain_info" label="域名信息" min-width="130">
        <template #default="scope">
          <copy :str="scope.row.domain_info"></copy>
          <div class="pre-code-box"><pre>{{JSON.parse(scope.row.domain_info)}}</pre></div>
        </template>
      </el-table-column>
      <el-table-column prop="permit_public" label="是否允许公网访问" min-width="130"></el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button 
            type="text" 
            style="padding-left: 0;padding-right:0;"
            :disabled="FnBtnDisabled('harborControl')"
            @click="FnControl(scope.row)">控制台</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page_index"
              :page-size="page_size"
              layout="total, prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import searchBox from '../../components/search-box.vue'
import Service from '@/service/harbor'
import copy from '../../components/copy.vue'
import {authBtnDisabled} from '@/utils/auth.js'
export default {
  components: { searchBox, copy },
  data() {
    return {
      search_list: {
        customer_id: {label: "客户ID", value: ""},
      },
      list: [],
      page_index: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    FnGetList(page) {
      if(page) this.page_index = page
      let reqData = {
        page_index: this.page_index,
        page_size: this.page_size,
      }
      if(this.search_list.customer_id.value) reqData.customer_id = this.search_list.customer_id.value
      Service.get_harbor_list(reqData).then(resData => {
        if(resData.code == "Success") {
          this.list = resData.data.harbor_list
          this.total = resData.data.harbor_count
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.FnGetList()
    },
    FnControl(row) {
      let url = window.location.origin + `/console/${row.vm_id}/centos/${row.vm_name}`
      window.open(url, '_blank')
    },
    FnBtnDisabled(key) {
      return authBtnDisabled(key, this.$route.meta.name)
    }
  },
  created() {
    if(this.$route.query.id) {
      this.search_list.customer_id.value = this.$route.query.id
      this.FnGetList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
}
.m-left20 {
  margin-left: 40px;
}
.page-box {
  margin-top: 10px;
  text-align: right;
}
</style>